.box{

}
.left{
    float: left;
    position: relative;
    width:480px ;
    height:450px ;
}
.left img{
    width:480px ;
    height:450px ;
    position: relative;
}
.left div img{
    width:480px ;
    height:450px ;
    position: relative;
}
.right{
    float: left;
    position: relative;
}
ul{
    list-style: none;
    display: inline-block;
}
.right img{
    width: 200px;
    height: 150px;
}
img:hover {
    filter:brightness(50%);
}
.overlay p{
    font-size: 14px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: white;
}
.overlay input{
    background-color: #FFAA00;
    border-radius: 10px;
    border-color: #FFAA00;
    color:white;
}
.left .image-container {
    position: relative;
    width: 480px;
    height: 450px;
    margin: auto;
    float: left;
}
.right .image-container {
    position: relative;
    width: 200px;
    height: 150px;
    margin: auto;
    float: left;
}
.overlay{
    position: absolute;
    top: 50%;
    left:50%;
    /* 字体居中 */
    transform: translate(-50%,-50%);
    font-size: large;
    /* 悬停前完全透明 */
    opacity: 0;
    transition: 0.3s ease-in-out;
}
.image-container:hover .overlay{
    transition: 0.3s ease-in-out;
    /* 悬停时完全不透明 */
    opacity: 1;
}
